<template>
  <div class="fun">
    <div class="funCenter">
      <ul class="oul">
        <li @click="goMyorders">
          <img src="../../components/My/image/wode_icon_dingdan.png" alt="" />
          <p>订单</p>
        </li>
        <li @click="goMyreport">
          <img src="../../components/My/image/wode_icon_baogao.png" alt="" />
          <p>报告</p>
        </li>
        <li @click="goMyuse">
          <img src="../../components/My/image/wode_icon_shiyong.png" alt="" />
          <p>试用</p>
        </li>
        <li @click="goMycoupons">
          <img src="../../components/My/image/wo_icon_youhuiquan.png" alt="" />
          <p>优惠券</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goMyorders() {
      this.$router.push({ path: "/myorders" });
    },
    goMyreport() {
      this.$router.push({ path: "/myreport" });
    },
    goMyuse() {
      this.$router.push({ path: "/myuse" });
    },
    goMycoupons() {
      this.$router.push({ path: "/mycoupons" });
    },
  },
};
</script>

<style scoped>
.fun {
  position: absolute;
  top: 335px;
  width: 100%;
  /* background: rgba(255, 0, 0, 0.358); */
  height: 130px;
  margin-bottom: 34px;
}
.funCenter {
  margin: 0 auto;
  width: 606px;
  height: 130px;
  background: #fff;
  /* background: red; */
  border-radius: 12px 12px 12px 12px;
  box-shadow: inset 0px 0px 6px 3px #ebebeb;
}
.oul {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
.oul li {
  text-align: center;
  width: 80px;
  height: 130px;
  padding-top: 24px;
}
.oul img {
  margin-left: 19px;
  display: block;
  width: 42px;
  height: 52px;
}
.oul p {
  text-align: center;
  width: 80px;
  padding-top: 18px;
  font-size: 22px;
}
</style>
